<script>
export default {
  props: {
    to: {
      type: String,
      required: true,
    },
    disabled: {
      type: Boolean,
      required: true,
    },
  },
  inject: ['parent'],
  //   inject 选项应该是：
  // 一个字符串数组，或 一个对象，对象的 key 是本地的绑定名，value 是：
  //     在可用的注入内容中搜索用的 key (字符串或 Symbol)，或
  //     一个对象，该对象的：
  //          from property 是在可用的注入内容中搜索用的 key (字符串或 Symbol)
  //          default property 是降级情况下使用的 value

  // Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。
  render() {
    return <div class='Teleport'>{this.$scopedSlots.default()}</div>
    // $scopedSlots用来访问作用域插槽。对于包括 默认 slot 在内的每一个插槽，该对象都包含一个返回相应 VNode 的函数。
  },
  watch: {
    disabled() {
      if (!this.disabled) {
        // this指向组件的实例。$el指向当前组件的DOM元素。
        document.querySelector(this.to).appendChild(this.$el)
      } else {
        this.parent.toSourceDom(this.$el)
      }
    },
  },
  mounted() {
    if (!this.disabled) document.querySelector(this.to).appendChild(this.$el)
  },
  methods: {},
}
</script>
<style lang="scss" scoped>
.Teleport {
  width: 100%;
  height: 100%;
}
</style>
